<template>
	<view class="list">
		<view class="g-item" v-for="(item, index) in dataListDemo" :key="item.id">
			<view class="top_warp gui-flex">
				<view class="row gui-flex1 center">
					<text class="gui-bold">{{item.name}}</text>
				</view>
			</view>
			<view class="row gui-flex gui-align-items-center gui-space-between">
				<text class="gui-bold">入库数量</text>
				<gui-step-box :value="item.quantity"
					:maxNum="999999" :minNum="0" @change="change($event, item, index)"
					></gui-step-box>
			</view>
			<view class="bot_warp gui-flex">
				<view class="gui-flex1">
					剩余数量：{{item.leftAmount}}
				</view>
				<view class="gui-flex1">
					是否进口：{{ (item.whetherImport == 1) ? '是' : '否'}}
				</view>
			</view>
			<view class="bot_warp gui-flex">
				<view class="gui-flex1">
					生产日期：{{item.produceTime}}
				</view>
				<view class="gui-flex1">
					过期日期：{{item.expireTime}}
				</view>
			</view>
			<view class="bot_warp gui-flex c6a">
				<view class="gui-flex1">
					单位：{{item.unit}}
				</view>
				<view class="gui-flex1">
					食品类型：{{item.fType}}
				</view>
				<view class="gui-flex1">
					子类型：{{item.fTypeSub}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * Collapse 折叠面板
	 * @description 展示可以折叠 / 展开的内容区域
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=23
	 * @property {String|Array} value 当前激活面板改变时触发(如果是手风琴模式，参数类型为string，否则为array)
	 * @property {Boolean} accordion = [true|false] 是否开启手风琴效果是否开启手风琴效果
	 * @event {Function} change 切换面板时触发，如果是手风琴模式，返回类型为string，否则为array
	 */
	export default {
		name: 'uniCollapse',
		emits:['change','activeItem','input','update:modelValue'],
		props: {
			dataList: {
				type: [String, Array],
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				dataListDemo: []
			}
		},
		watch: {
			dataList(val) {
				let data = JSON.stringify(this.dataList);
				this.dataListDemo = JSON.parse(data);
			}
		},
		created() {
			
		},
		mounted() {
			
		},
		methods: {
			change(e, item, index) {
				console.log(e[0]);
				item.quantity = e[0];
				console.log(this.dataListDemo)
			},
			getData() {
				return this.dataListDemo;
			}
		}
	}
</script>

<style lang="scss">
	.list {
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.g-item {
		width: 100%;
		padding: 20rpx;
		background-color: #fff;
		box-sizing: border-box;
		line-height: 150%;
		margin-bottom: 18rpx;
	}

	.c6a {
		color: #6a779b;
	}
</style>